<template>
	<view class="container">
		<uni-nav-bar title="临期预警" fixed statusBar :border="false" height="88rpx" left-icon="left" @clickLeft="onClickLeft"></uni-nav-bar>
		<view class="topTag">
			<uni-search-bar v-model="name" radius="100" placeholder="商品名称/助记符/条码" cancelButton="none"
				style="flex: 1; margin: 0; padding: 0; margin-right: 20rpx" @confirm="searchFn" @clear="clearFn" />
		</view>
		<scroll-view :style="{height:`calc(100vh - 168rpx - ${statusBarHeight}px)`}" style="height: calc(100vh - var(--window-top));overflow: hidden;"
			scroll-y enhanced :show-scrollbar="false" :scroll-with-animation="true" refresher-enabled @refresherrefresh="pulldownRefresh"
			:refresher-triggered="refreshStatus" @touchmove.stop @scrolltolower="scrolltolower">
			<view class="list" v-if="goodsList.length > 0">
				<view class="item" v-for="(item,index) in goodsList" :key="index">
					<view class="title">
						{{item.commodityName}}
					</view>
					<view class="sub_title">
						条码：{{item.barCode}}
					</view>
					<view class="sub_title">
						批次号：{{item.batchNumber}}
					</view>
					<view class="price">
						<text>保质期：{{item.expiryNum == '-1' ? '长期': item.expiryNum}}天</text>
						<text :class="item.className">剩余天数：{{item.daysRemaining}}天</text>
					</view>
					<view class="sub_title">
						剩余库存：{{item.inventoryNumber}}
					</view>
					<view class="sub_title">
						生产日期：{{item.manufactureTime}}
					</view>
				</view>
				<uni-load-more :status="loading" v-if="goodsList.length > 0"></uni-load-more>
			</view>
			<view style="width: 100%;height: 100%;background-color: #f7f7f7;display: flex;justify-content: center;align-items: center;"
				v-if="goodsList.length == 0">
				<image src="/static/index/nonedata.png" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	let safeAreaBottom = uni.getSystemInfoSync().safeAreaInsets.bottom;
	import { reqWarnList } from '@/apis/member.js'
	export default {
		name: "Lqyj",
		data() {
			return {
				safeAreaBottom: safeAreaBottom,
				goodsList: [],
				refreshStatus: false,
				loading: 'loading',
				page: {
					pageNum: 1,
					pageSize: 15,
					total: 0
				},
				name: '',
			}
		},
		onLoad() {
			this.getOrderList();
		},
		methods: {
			pulldownRefresh() {
				this.loading = 'loading';
				this.refreshStatus = true;
				this.page = {
					pageNum: 1,
					pageSize: 15,
					total: 0
				}
				this.goodsList = [];
				this.getOrderList();
			},
			scrolltolower() {
				if (this.loading == "noMore") {
					return;
				}
				this.page.pageNum++;
				this.loading = "loading";
				this.getOrderList();
			},
			searchFn() {
				this.page.pageNum = 1
				this.goodsList = []
				this.loading = true
				this.getOrderList()
			},
			clearFn() {
				this.page.pageNum = 1
				this.goodsList = []
				this.loading = true
				this.getOrderList()
			},
			async getOrderList() {
				let { page: { pageNum, pageSize }, name } = this;
				let res = await reqWarnList({ pageNum, pageSize, name });
				if (res.code === 200) {
					const data = res.data;
					console.log(data);
					let arr = [...this.goodsList, ...data.list];
					const map = new Map();
					const newArr = arr;
					this.goodsList = newArr.map(item => {
						let className = "";
						if (item.expiryNum && item.daysRemaining) {
							if (item.daysRemaining / item.expiryNum <= 0.67 && item.daysRemaining / item.expiryNum > 0.5) {
								className = 'col-four'
							} else if (item.daysRemaining / item.expiryNum <= 0.5 && item.daysRemaining / item.expiryNum > 0.33) {
								className = 'col-three'
							} else if (item.daysRemaining / item.expiryNum <= 0.33 && item.daysRemaining / item.expiryNum > 0.25) {
								className = 'col-two'
							} else if (item.daysRemaining / item.expiryNum <= 0.25) {
								className = 'col-one'
							}
						}
						return {
							...item,
							className
						}
					});
					if (res.data.isLastPage) {
						this.loading = "noMore";
					}
					this.refreshStatus = false;
				}
			},
		},
	}
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - var(--window-top));
		/* #endif */
	}

	.topTag {
		height: 80rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;

		.stateBox {
			display: flex;
			align-items: center;
			flex: 1;
			box-sizing: border-box;
			padding: 0 10rpx;
		}
	}

	.list {
		padding: 20rpx 20rpx;
		padding-bottom: 0;

		.item {
			padding: 20rpx 24rpx;
			background-color: #fff;
			border-radius: 8rpx;
			margin-bottom: 20rpx;

			view {
				line-height: 1em;
			}

			.title {
				font-size: $uni-font-size-base;
				margin-bottom: 15rpx;
			}

			.sub_title {
				font-size: $uni-font-size-unBase;
				margin-bottom: 15rpx;
			}

			.price {
				display: flex;
				justify-content: space-between;
				font-size: $uni-font-size-unBase;
				margin-bottom: 15rpx;
			}

			.time {
				font-size: $uni-font-size-small;
			}
		}
	}

	.col-four {
		color: #0081cf !important;
	}

	.col-three {
		color: #ffc75f !important;
	}

	.col-two {
		color: #ff9671 !important;
	}

	.col-one {
		color: #c34a36 !important;
	}
</style>